<template>
  <div id="app">
    <div id="nav">
      <!-- vue的组件跳转 router-link
      to="路径" -->
      <router-link to="/">首页</router-link> | 
      <router-link to="/about"> About</router-link>|<router-link to="/cart">购物车</router-link>|
      <router-link to="/mine">个人中心</router-link> |
        <router-link to="/order">ref和父传子</router-link>|
      <router-link to="/msg">vue的$set,$nextick等</router-link> |   
      <router-link to="/mycom">内置组件</router-link>|
      <router-link to="/myslot">插槽</router-link>|
      <router-link to="/mytran">子路由，动画</router-link>|  <router-link to="/mydir">指令和自定义指令</router-link>|
      <router-link to="/weather">天气预报</router-link>|
     <router-link to="/chart">echarts练习</router-link>
    </div>

    <!-- 视图的出口位置 
    router-view 是vue路由的组件切换的位置
    -->
    <!-- 项目中的 keep-alive使用 要结合路由的自定义配置项 meta 来控制是否缓存 -->
    <!-- 缓存的组件 当$route中的meta的keepAlive为真都是时候-->
    <keep-alive>
         <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 不缓存的 -->
       <router-view v-if="!$route.meta.keepAlive" />
        <!--如果组件名驼峰命名 可以一下俩种调用方式 -->
    <!-- <tabbarCom /> -->
    <!-- <tabbar-com></tabbar-com> -->

  </div>
</template>

<script>
//引入子组件
import tabbarCom from './components/tabbar'
export default {
  data(){
    return {}
  },
  methods: {
    
  },
  components:{ //注册子组件 
    // 组件名：引入的组件
    // tabbarCom:tabbarCom,
     tabbarCom  
  }

}
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;
    // .router-link-exact-active 样式
    // 规定router-link激活后的样式
    &.router-link-exact-active {
      color: red;
      font-size: 20px;
    }
  }
}
</style>
